<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋信息列表</title>

    <link rel="stylesheet" href="/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/laypage.css">

    <script type="text/javascript" src="/dist/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/dist/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dist/js/layer/layer.js" charset="utf-8"></script>

</head>
<body>
<div  id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="htitle">标题</label>
            <input type="text" class="form-control" id="htitle" placeholder="标题">
        </div>
        <div class="form-group">
            <label class="sr-only" for="hprice">房屋面积</label>
            <input type="text" class="form-control" id="hprice" placeholder="房屋面积">
        </div>
        <button type="button" id="findHouse" class="btn btn-success">查询房屋</button>
        <button type="button" id="addHouseBtn" class="btn btn-danger">增加房屋</button>
    </form>


    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>序号</td>
                <td>ID</td>
                <td>标题</td>
                <td>月租</td>
                <td>面积</td>
                <td>房产证日期</td>
                <td>联系方式</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.hid}}</td>
                <td>{{item.htitle}}</td>
                <td>{{item.hprice}}</td>
                <td>{{item.hfloorage}}</td>
                <td>{{item.hcontact}}</td>
                <td>{{item.hdesc}}</td>
                <td><a href='#'>编辑</a>|<a href='#'>删除</a></td>

            </tr>
            </tbody>
            <tr>
                <td colspan="3"><div id="pagenav"></div></td>
            </tr>
        </table>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
//http://localhost:8080/ZView/houseInfoList.ftl


    var app=new Vue({
       el:"#app",
       data:{
           result:[]
       }
    });

    /*111*/
    var getHouseList=function(currPageNo){
        console.log("111getHouseList函数被调用");
        $.ajax({
           type:"post",
           url:"/searchByConditions2House.dojava",
           data:{
               pageNum:currPageNo||1,
               pageSize:5,
               htitle:$("#htitle").val(),
           },
            dataType:"json",
            success:function (obj) {
               console.log("obj=======");
               console.log(obj);
               app.result=obj.page;

               laypage({
                   cont:"pagenav",
                   pages:obj.totalPages,
                   curr:currPageNo||1,
                   skin:"#5079ff",
                   first:"第一页",
                   last:"最后一页",
                   jump:function (first,obj222) {
                       if (!first){
                           getHouseList(obj222.curr);
                       }
                   }
               });

            }
        });

    }
    getHouseList();

    /*111点击查询事件*/
    $("#findHouse").click(function () {
        console.log("111查询房屋信息的按钮点击事件");
        getHouseList();
    });

    /**/
    console.log("-111");
    $(function () {
        console.log("000");
    });
</script>